<template>
	<div class="base-business-tree">
		<slot name="treeRoot"></slot>
		<a-ztree
			class="a-tree-custom-style"
			v-if="treeDataIcon.length > 0"
			:checkedKeys="checkedKeys"
			:show-line="showLine"
			:checkable="checkable"
			:selected-keys="selectedKeys"
			:expanded-keys="expandedKeys"
			:check-strictly="checkStrictly"
			:tree-data="treeDataIcon"
			:replaceFields="replaceFields"
			:showIcon="true"
			:icon="renderIcon"
			@select="onSelect"
			@check="onCheck"
		>
		</a-ztree>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import seletOrgIconConfig from '../../config/iconfont';
import { EntityTypes } from '@/utils/orgConstants.js'

export default {
	name: 'baseBusinessTree',
	components: {},
	props: {
		/** 【必填参数】 */
		/** tree数据源 */
		treeData: { type: Array, default: () => [] },
		/** 自定义页签主数据 */
		tabMainInfo: { type: Object, default: () => { } },
		/** 【非必填参数】 */
		/** 是否显示选择框， true显示，false不显示 */
		checkable: { type: Boolean, default: true },
		/** 是否显示连接线， true显示，false不显示 */
		showLine: { type: Boolean, default: false },
		/** 父子节点是否联动， true不联动，false联动 */
		checkStrictly: { type: Boolean, default: true },
		/** 默认选中的节点， 由节点id组成的数组 */
		defaultSelected: { type: Array, default: () => [] },
		/** 默认展开的树形节点， 由展开的节点id组成的数组 */
		defaultExpandedKeys: { type: Array, default: () => [] }
	},
	data() {
		return {
			selectedKeys: [],
			expandedKeys: this.defaultExpandedKeys,

			replaceFields: {
				title: 'name',
				key: 'id',
				children: 'children'
			},

			checkedIds: [],
			checkedData: []
		};
	},
	computed: {
		...mapState('selectData', ['selectedEntityMap']),
		checkedKeys: {
			set() {
			},
			get() {
				return this.checkedIds;
			}
		},
		treeDataIcon() {
			return this.treeData;
		},
		selectType() {
			return this.tabMainInfo.extInfo.selectType;
		}
	},
	watch: {
		defaultExpandedKeys(val) {
			this.expandedKeys = val;
		},
		defaultSelected(val) {
			this.selectedKeys = val;
		},
		selectedEntityMap: {
			deep: true,
			handler(val) {
				this.onSelectMap(val);
			}
		}
	},
	methods: {
		onCheck(keys, callbackData) {
			this.checkedIds = keys;
			let nodeData = callbackData.node.data;
			let index = this.checkedKeys.findIndex(el => el === nodeData.id);
			if (index !== -1) {
				this.checkedIds.splice(index, 1);
			}
			let node = {...nodeData, checked: !callbackData.checked};
			let checkeds = [nodeData];
			let argments = {
				checkeds: checkeds,
				ids: JSON.parse(JSON.stringify(keys))
			};

			this.$emit('toCheckedNode', argments, node);
		},
		onSelect(keys, selectData) {
			let data = selectData.node.data;
			let id = data.id;
			this.selectedKeys = [id];
			let selected = [data];
			this.$emit('toSelectNode', { selected: selected, id: id });
		},
		onTreeDataAddIcon(nodes) {
			return nodes.map((item) => {
				item.scopedSlots = { title: 'custom', icon: 'custom' };
				if (item.children) {
					this.onTreeDataAddIcon(item.children);
				}
				return item;
			});
		},
		/** 根据存放在store/seletPeople中的selectMap确定已勾选的节点
		 * @params { Object } 已选择节点的map
		 */
		onSelectMap(val) {
			let pathKeys = val && Object.keys(val);
			if (pathKeys && pathKeys.length) {
				this.onHandlerCheckedTreeNode(val);
			} else {
				this.checkedIds = [];
			}
		},
		onHandlerCheckedTreeNode(data) {
			this.checkedIds = [];
			let typeIds = Object.keys(data);
			for (let item of typeIds) {
				const itemList = item.split('|');
				let type = itemList[0];
				this.checkedIds.push(itemList[1]);
			}
		},
		renderIcon(treeNode) {
			let { data } = treeNode;
			let type = data.type;
			// 单位icon
			let accountIcon = seletOrgIconConfig.seletOrgIconPath['cap-icon-alternative-company'];
			// 部门icon
			let departmentIcon = seletOrgIconConfig.seletOrgIconPath['cap-icon-alternative-department'];
			// 部门icon
			let memberIcon = seletOrgIconConfig.seletOrgIconPath['cap-icon-tree-member'];
			// 部门icon
			let postIcon = seletOrgIconConfig.seletOrgIconPath['cap-icon-tree-post'];

			if (type.indexOf('Account') !== -1) {
				return accountIcon;
			}
			if (type.indexOf('Department') !== -1) {
				return departmentIcon;
			}
			if (EntityTypes.Member === type) {
				return memberIcon;
			}
			if (EntityTypes.Post === type) {
				return postIcon;
			}
			return null;
		}
	},
	created() {
		this.onSelectMap(this.selectedEntityMap);
	}
};
</script>

<style scoped lang="scss">
.base-business-tree {
	background: #fff;
	overflow: auto;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
}
</style>
